<template>
  <div class="app-container">
    <!--查询-->
    <el-form :inline="true" :model="transferQuery" class="demo-form-inline">
      <el-form-item label="名字">
        <el-select v-model="transferQuery.userId" filterable clearable placeholder="输入名字">
          <el-option
            v-for="user in userList"
            :key="user.id"
            :label="user.name"
            :value="user.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker v-model="transferQuery.begin" value-format="timestamp" type="date" placeholder="开始时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="transferQuery.end" value-format="timestamp" type="date" placeholder="结束时间"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" style="margin: 10px" @click="handleAddTransfer">新建调岗</el-button>

    <el-table :data="transferList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" prop="name" label="名称" width="180">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="departmentId" label="调动后部门">
        <template slot-scope="scope">
          {{ scope.row.afterDepartmentName }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="departmentId" label="调动后职位">
        <template slot-scope="scope">
          {{ scope.row.afterJobName }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="order" label="顺序">
        <template slot-scope="scope">
          <el-date-picker readonly v-model="scope.row.removeDate" type="date" placeholder="调动日期"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reason" label="原因">
        <template slot-scope="scope">
          {{ scope.row.reason }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="remark" label="备注">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handlePass(scope)" v-text="scope.row.status==='FALSE'? '通过': '已生效'" :disabled="scope.row.status==='TRUE'">通过</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getTransfers"
      />
    </div>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Transfer':'New Transfer'">
      <el-form :model="transfer" label-width="90px" label-position="left">
        <el-form-item label="名字" prop="name">
          <el-select v-model="transfer.userId" filterable clearable placeholder="输入名字">
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.name"
              :value="user.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调动后部门" prop="afterDepartmentId">
            <el-cascader
              v-model="transfer.afterDepartmentId"
              :options="departmentList"
              :props="SetCustomDept"
              clearable
              filterable></el-cascader>
        </el-form-item>
        <el-form-item label="调动后职位" prop="afterJobId">
            <el-select v-model="transfer.afterJobId" filterable placeholder="请选择职位">
              <el-option
                v-for="position in positionList"
                :key="position.id"
                :label="position.name"
                :value="position.id">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="调岗日期" prop="removeDate">
          <el-date-picker
            v-model="transfer.removeDate"
            type="date"
            value-format="timestamp"
            placeholder="开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="原因" prop="reason">
          <el-input v-model="transfer.reason" placeholder="原因"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="transfer.remark" placeholder="备注"/>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmTransfer">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { addTransfer, getTransfers, passTransfer } from '@/api/transfer'
import { getDepartments } from '@/api/department'
import { getPositions } from '@/api/position'
import { getUserList } from '@/api/user'

const defaultTransfer = {
  id: '',
  userId: '',
}

export default {
  name: 'TransferManager',
  data() {
    return {
      transfer: {},
      dialogVisible: false,
      dialogType: 'new',
      transferList: [],
      transferQuery: {},
      departmentList: [],
      positionList: [],
      userList: [],
      SetCustomDept: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
      total: 100,
      page: 1,
      limit: 20,
    }
  },
  created() {
    this.getTransfers()
    this.getDepartments()
    this.getPositions()
    this.getUserList()
  },
  methods: {
    async getTransfers(page = 1) {
      const offset = this.limit * (page - 1);
      const res = await getTransfers(this.transferQuery, offset, this.limit)
      this.transferList = res.data.rows
      this.total = res.data.total
    },
    onSubmit() {
      this.getTransfers()
    },
    async getDepartments() {
      await getDepartments(-1).then(res=>{
        // 调用递归方法，去除级联数据后将数据赋值给级联选择器
        this.departmentList=res.data
      });
    },
    async getPositions() {
      const res = await getPositions()
      this.positionList = res.data
    },
    async getUserList() {
      const res = await getUserList()
      this.userList = res.data
    },
    handleAddTransfer() {
      this.transfer = Object.assign({}, defaultTransfer)
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    async handlePass({ $index, row }) {
      await passTransfer(row.id, 'TRUE')
      await this.getTransfers()
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
    },
    async confirmTransfer() {
      const val = this.transfer.afterDepartmentId
      this.transfer.afterDepartmentId = !isNaN(val) || typeof(val) == "undefined"? val : val.pop()
      await addTransfer(this.transfer)
      await this.getTransfers()
      this.dialogVisible = false
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: "操作成功",
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>

</style>
